<template>
  <div>
    <!-- 轮播 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in msgList" :key="item.sku_id">
          <img :src="item.artwork" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- 会员信息 -->
    <div class="msg">
      <div class="msgMain">
        <div class="all">
          <img @click="toLogin" src="../../../../public/images/01.jpg" />
          <div class="text">
            <h2 @click="toLogin">
              {{ userInfo.nickName ? userInfo.nickName : "游客用户" }}
            </h2>
            <p>暂未开通会员</p>
          </div>
        </div>
        <h3>立即开通</h3>

        <h4 class="h4">平均每年为每位会员节省：1100+元</h4>
      </div>
      <div class="msgMain01">
        <p>新客限时低价</p>
      </div>
    </div>

    <div class="text">
      <van-divider
        :style="{ color: '#ce994f', borderColor: '#ce994f', padding: '0 16px' }"
      >
        盐选会员尊享特权
      </van-divider>
    </div>
    <!-- 特权 -->
    <van-row class="center" type="flex" justify="space-between">
      <van-col class="centerMain" span="6">
        <h2>内容特权</h2>
        <p class="con">看价值百万内容</p>
        <div class="icon">
          <van-icon name="comment-o" size="50" color="#745e35" />
        </div>
      </van-col>
      <van-col class="centerMain" span="6">
        <h2>功能特权</h2>
        <p class="con">享超多功能特权</p>
        <div class="icon">
          <van-icon name="setting-o" size="50" color="#745e35" />
        </div>
      </van-col>
      <van-col class="centerMain" span="6">
        <h2>超多福利</h2>
        <p class="con">领千元专项福利</p>
        <div class="icon">
          <van-icon name="gift-o" size="50" color="#745e35" />
        </div>
      </van-col>
    </van-row>
    <!-- 盐选榜单 -->
    <div class="list">
      <div class="listTop">
        <h1>盐选榜单</h1>
        <div class="right">
          <a href="https://www.zhihu.com/xen/market/salt-ranking-list"
            ><h2>查看全部</h2></a
          >
          <van-icon name="play" size="10" color="#ce994f" />
        </div>
      </div>
      <!-- 滑块 -->
      <div class="swipe">
        <div
          class="swipe01"
          :style="{ backgroundImage: 'url(' + item.icons + ')' }"
          v-for="item in msgList"
          :key="item.sku_id"
        >
          <div class="swipe01Top">
            <h1>{{ item.title }}</h1>
          </div>
          <div
            class="swipe01Main"
            v-for="hotList in item.hot"
            :key="hotList.index"
          >
            <a :href="hotList.herf">
              <van-image class="lazyImg" lazy-load :src="hotList.url" />
              <div class="swipe01Text">
                <h2>{{ hotList.content_text }}</h2>
                <h3>{{ hotList.author_desc }}</h3>
              </div>
            </a>
            <!-- <img :src="hotList.url" alt="" /> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 大咖驾到 -->
    <div class="person">
      <div class="personTop">
        <h1>大咖驾到</h1>
      </div>
      <!-- 大咖内容 -->
      <van-tabs v-model="active">
        <van-tab
          v-for="item in msgList"
          :key="item.sku_id"
          :title="item.person"
        >
          <div class="show">
            <img :src="item.topImg" alt="" />
            <div class="showMain">
              <!-- 每个元素的两侧间隔相等 -->
              <van-row type="flex" justify="space-around">
                <van-col span="6" v-for="per in item.personList" :key="per.id">
                  <a :href="per.web">
                    <!-- 试试懒加载 -->
                    <van-image height="100" lazy-load :src="per.img">
                    </van-image>
                    <!-- <img :src="per.img" alt="" /> -->
                    <p>{{ per.text }}</p>
                  </a>
                </van-col>
              </van-row>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 大家都在看 -->
  </div>
</template>

<script>
import Swiper from "swiper";
import { getSelect } from "@/api";
export default {
  name: "Vip",
  data() {
    return {
      active: 0,
      msgList: [],
      userInfo: {},
    };
  },
  watch: {
    // 监听已有属性msgList变化
    msgList: {
      immediate: true,
      handler(newVal, oldValue) {
        this.$nextTick(() => {
          var mySwiper = new Swiper(".swiper-container", {
            // loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
            },

            // 如果需要前进后退按钮
            // navigation: {
            //   nextEl: ".swiper-button-next",
            //   prevEl: ".swiper-button-prev",
            // },
          });
        });
      },
    },
  },
  mounted() {
    // 获取数据
    this.getData();
    // 获取个人信息
    let userInfo = localStorage.getItem("user") || this.$route.query.user;
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo);
    }
    // console.log(this.userInfo);
  },
  methods: {
    async getData() {
      let result = await getSelect();
      // console.log(result);
      this.msgList = result.data.slice(0, 4);
      // console.log(this.msgList);
    },
    // 去登录页
    toLogin() {
      let userInfo = localStorage.getItem("user");
      if (!userInfo) {
        this.$router.push("/login/tologin");
      }
    },
  },
};
</script>

<style lang='less' scoped>
.swiper-container {
  width: 100%;
  height: 250px;
  .swiper-wrapper {
    .swiper-slide img {
      width: 100%;
      height: 300px;
    }
  }
}
.msg {
  width: 100%;
  height: 100px;
  position: relative;
  top: -10px;
  z-index: 1;
  .h4 {
    position: absolute;
    top: 80px;
    font-size: 12px;
    margin-left: 20px;
    color: #ce994f;
    font-weight: normal;
  }

  .msgMain {
    width: 80%;
    height: 100px;
    background-color: white;
    margin-left: 20px;
    float: left;
    border-radius: 10px;

    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: block;
      margin-left: 15px;
      margin-top: 10px;
      float: left;
    }
    .text {
      margin-left: 10px;
      float: left;
      p {
        font-weight: normal;
        margin-top: 10px;
        font-size: 14px;
      }
    }

    h3 {
      float: right;
      line-height: 40px;
      margin-right: 10px;
      background-color: #e2b371;
      color: #745e35;
      font-weight: 700;
      border-radius: 50px;
      width: 90px;
      text-align: center;
      margin-top: 30px;
    }
  }
  .msgMain01 {
    width: 80%;
    height: 100px;
    background-color: rgb(241, 61, 61);
    margin-left: 50px;
    border-radius: 10px;
    p {
      font-size: 14px;
      color: #fff;
      padding: 0 3px;
      text-align: center;
      padding-top: 8px;
    }
  }
}

.text {
  margin: 30px auto;
  font-weight: 700;
}
.center {
  width: 90%;
  height: 125px;

  margin: 0 auto;
  .centerMain {
    float: left;
    width: 105px;
    height: 125px;

    border-radius: 10%;
    background-color: #fcf8ed;
    h2 {
      font-size: 16px;
      text-align: center;
      margin: 10px auto;
      font-weight: 700;
      color: #745e35;
    }
    .con {
      font-size: 12px;
      text-align: center;
      margin: 15px auto;
      color: #ce994f;
      font-weight: 700;
    }
    .icon {
      text-align: center;
    }
  }
}
.list {
  margin-top: 35px;
  width: 375px;
  margin-left: -12px;

  .listTop {
    h1 {
      font-size: 20px;
      font-weight: 700;
      margin-left: 5px;
      display: inline-block;
      color: #000;
    }
    .right {
      margin-right: 15px;
      float: right;
      h2 {
        display: inline-block;
        color: #ce994f;
        margin-right: 5px;
        font-size: 14px;
      }
    }
  }
  .swipe {
    display: flex;
    margin-left: -5px;
    width: 350px;
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: scroll;
    &::-webkit-scrollbar {
      display: none;
    }

    .swipe01 {
      height: 250px;
      flex: 0 0 250px;
      background-color: rgb(219, 187, 144);
      margin: 10px 0 0 15px;
      border-radius: 20px;
      flex-direction: column;
      background-image: url("../../../../public/images/main01.jpg");

      .swipe01Top {
        margin: 20px 0 20px 20px;
        h1 {
          color: #fff;
          font-size: 24px;
          font-weight: 700;
          margin-bottom: 10px;
        }
      }
      .swipe01Main {
        width: 200px;
        height: 50px;
        margin: 0 auto;
        .lazyImg {
          width: 30px;
          height: 40px;
          float: left;
        }
        .swipe01Text {
          height: 40px;
          margin-left: 50px;
          h2 {
            color: #fff;
            font-size: 16px;
            white-space: pre-wrap;
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            margin: 8px 0;
            font-weight: 700;
          }
          h3 {
            color: #fff;
            font-size: 14px;
            margin: 8px 0;
          }
        }
      }
    }
  }
}
.person {
  margin-top: 35px;
  .personTop {
    h1 {
      font-size: 20px;
      font-weight: 700;
      margin-left: 15px;
      display: inline-block;
    }
  }
  .show {
    height: 200px;
    width: 90%;
    border: 1px solid #000;
    overflow: hidden;

    margin: 0 auto;
    border-radius: 10px;
    img {
      width: 100%;
      height: 50px;
    }
    .showMain {
      margin-top: 10px;
      img {
        height: 100px;
      }
      p {
        font-size: 16px;
        margin-top: 10px;
        white-space: pre-wrap;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
    }
  }
}
.see {
  margin-top: 20px;
  .seeTop {
    h1 {
      font-size: 20px;
      font-weight: 700;
      margin-left: 15px;
      display: inline-block;
    }
  }
}
</style>
